<template>
	<view class="container">
		<view class="checkwrap">
			<view class="checktit">请输入验证码</view>
			<view class="checkfutit">验证码已发送至手机：<text>+86 {{phonenumber}}</text></view>
			<view class="checkform">
				<form>
					<view class="checkinput">

						<u-message-input :value="smscode" :focus="true" bold :maxlength="6" @finish="finished"></u-message-input>

					</view>
				</form>
				<view class="countdown">
						<u-count-down :timestamp="60"></u-count-down>后可以重发验证码
				</view>
				<view class="doubt">
					<image src="/static/images/ask.png"></image>收不到验证码
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>

</template>

<script>
	import oneInput from '@/components/myp-one/myp-one.vue'
	export default {
		components: {
			oneInput
		},
		data() {
			return {
				smscode: '',
				phonenumber: '',
				codeid:0
			}
		},
		onLoad: function(option) {
			this.phonenumber = option.phone;
			this.codeid = option.id;
			console.info(option);
		},
		methods: {

			inputcode() {


			},
			finished(val) {
				let smscode = val
				const baseURL = getApp().globalData.baseURL;
				uni.request({
					url: baseURL + 'client/login',
					data: {
						type: 2,
						username: this.phonenumber,
						verification: smscode,
						codeid:this.codeid
					},
					method: 'POST',
					success: res => {   
						if (res.data.code == 20000) {
							//保存登陆状态
							getApp().globalData.userinfo = res.data.data
							this.$refs.uToast.show({
								title: '登录成功',
								type: 'success',
								url: '/pages/index/index'
							})
						} else {
							this.smscode  = '';
							this.$refs.uToast.show({
								title: res.data.msg,
								type: 'error',
							}) 
						}

					},
					error: function(rej) {}
				})


			},
			toClear() {
				this.test = ''
				this.$refs.hi.clear()
			}

		}
	}
</script>

<style scoped>
	@import url("/common/common.css");

	/* pages/check/check.wxss */
	.checktit {
		width: 100%;
		font-size: 40rpx;
		color: #333;
		margin-bottom: 30rpx;
	}

	.checkfutit {
		width: 100%;
		color: #333;
		font-size: 28rpx;
		margin-bottom: 90rpx;
	}

	.checkfutit text {
		color: #8bc5ff;
	}

	.checkinput {
		width: 100%;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.checkinput input {
		display: block;
		float: left;
		width: 23.5%;
		margin-right: 2%;
		height: 94rpx;
		text-align: center;
		font-size: 72rpx;
		color: #53575a;
		border-bottom: 1rpx solid #666;
	}

	.checkform,
	.checkform form {
		width: 100%;
		overflow: hidden;
	}

	.checkinput input:last-child {
		margin-right: 0;
	}

	.countdown {
		width: 100%;
		overflow: hidden;
		color: #ccc;
		font-size: 26rpx;
	}

	.doubt {
		width: 100%;
		overflow: hidden;
		color: #68b3ff;
		font-size: 26rpx;
		text-align: center;
		margin-top: 84rpx;
	}

	.doubt image {
		width: 26rpx;
		height: 26rpx;
		display: inline-block;
		margin-right: 10rpx;
	}
</style>
